<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>浏览器缩放检测工具</title>
    <style>
      * {
        margin: 0;
      }

      html,
      body,
      .view {
        width: 100%;
        height: 100%;
      }

      body {
        overflow: hidden;
      }

      .view {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1em 0;
        row-gap: 1em;
        transform-origin: center top;
      }

      .tip {
        color: red;
        font-size: 24px;
        white-space: nowrap;
      }

      table {
        font-size: 20px;
        font-weight: bold;
      }

      tbody {
        color: blue;
      }

      tr.red {
        color: red;
      }

      td {
        min-width: 200px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="view">
      <p class="tip">注意：请按 F11 在全屏状态下查看该页面！</p>
      <div id="table"></div>
    </div>

    <script>
      function toFixed(num) {
        return Number(num.toFixed(2));
      }

      function check() {
        const { screen, devicePixelRatio, innerWidth, innerHeight } = window;

        const browserScale = toFixed(screen.width / innerWidth);
        const screenScale = toFixed(
          devicePixelRatio / (screen.width / innerWidth)
        );
        const resolutionWidth = toFixed(screen.width * screenScale);
        const resolutionHeight = toFixed(screen.height * screenScale);

        const screenParams = [
          {
            label: "当前分辨率",
            value: `${screen.width}x${screen.height}`,
          },
          {
            label: "原始分辨率",
            value: `${resolutionWidth}x${resolutionHeight}`,
          },
          {
            label: "屏幕缩放",
            value: `${toFixed(screenScale * 100)}%`,
            tag: screenScale !== 1 ? "red" : "",
          },
          { label: "&nbsp;", value: "" },
          {
            label: "页面尺寸",
            value: `${innerWidth}x${innerHeight}`,
          },
          {
            label: "浏览器缩放",
            value: `${toFixed(browserScale * 100)}%`,
            tag: browserScale !== 1 ? "red" : "",
          },
        ];

        document.getElementById("table").innerHTML = `<table border>
          <thead>
            <tr>
              <th>参数</th>
              <th>值</th>
            </tr>
          </thead>
          <tbody>
            ${screenParams
              .map(
                (v) => `<tr class="${v.tag || ""}">
                          <td>${v.label}</td>
                          <td>${v.value}</td>
                        </tr>`
              )
              .join("")}
            </tbody>
        </table>`;

        document.querySelector(".view").style.transform = `scale(${
          1 / browserScale
        })`;
      }

      check();

      window.addEventListener("resize", check);
    </script>
  </body>
</html>
